<template>
  <div>
    <el-card class="box-card">
      <el-button
        type="primary"
        @click="addVisible=true"
      >添加</el-button>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        
      >
        <el-table-column
          prop="id"
          label="序号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="clazzName"
          label="班级"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="clazzNum"
          label="人数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              @click="showtaVisible(scope.row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="removeById(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页
      currentPage: 1, //初始页
      pagesize: 2, //    每页的数据
      total: 3, //总页数
      :page-sizes="[5, 10, 20, 40]" //这是下拉框可以选择的，每选择一行，要展示多少内容
      :page-size="pagesize" //显示当前行的条数
       -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1,2,3,4]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加班级弹框 -->
    <el-dialog
      title="添加班级表"
      :visible.sync="addVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <!-- 内容区 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
      >
        <el-form-item
          label="班级"
          prop="clazzName"
        >
          <el-input type="text" v-model="addForm.clazzName"></el-input>
        </el-form-item>
        <el-form-item
          label="人数"
          prop="clazzNum"
        >
          <el-input type="text" v-model="addForm.clazzNum"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addList"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改班级弹框 -->
    <el-dialog
      title="修改班级表"
      :visible.sync="updataVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <!-- 内容区 -->
      <el-form
        :model="editForm"
        :rules="updateFormRules"
        ref="addFormRef"
        label-width="70px"
      >
        <el-form-item
          label="班级"
          prop="clazzName"
        >
          <el-input type="text" v-model="editForm.clazzName"></el-input>
        </el-form-item>
        <el-form-item
          label="人数"
          prop="clazzNum"
        >
          <el-input type="text" v-model="editForm.clazzNum"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="updataVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="updataList"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import moment from "moment";
export default {
  data() {
    return {
      value1: '',
      value2:[],
      currentPage: 1, //初始页
      pagesize: 2, //    每页的数据
      total: 0, //总页数
      //后台获取数据临时存放点
      tableData: [],
      // 是否显示添加用户弹窗
      addVisible: false,
      // 是否显示修改用户弹窗
      updataVisible: false,
      //添加数据表单
      addForm: {
        clazzName: "",
        clazzNum:""
      },
      //修改数据表单
      editForm: {
        clazzName: "",
        clazzNum:""
      },
      //添加表单的验证规则对象
      addFormRules: {
        clazzName: [
          { required: true, message: "请输入班级名称", trigger: "blur" },
          { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" }
        ],
        clazzNum: [
          { required: true, message: "请输入班级人数", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ]
      },
      updateFormRules: {
        clazzName: [
          { required: true, message: "请输入班级名称", trigger: "blur" },
          { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" }
        ],
        clazzNum: [
          { required: true, message: "请输入班级人数", trigger: "blur" },
          { min: 0, max: 15, message: "长度在 0 到 150 个字符", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getMain();
  },
  methods: {
    //分页的
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size;
      this.getMain()
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      //点击第几页
      this.getMain()
    },
    getMain() {
      this.$http.get("http://10.6.98.76:8080/v1/clazz/page",{
        params: {
          pos:this.currentPage,
          rows:this.pagesize
        }
      }).then(
        res => {
          //console.log(res.data);
           this.tableData = res.data.list;
           this.total=res.data.total
          //console.log(this.total);
        },
        () => {
          console.log("error");
        }
      );
    },
    //监听添加课程表对话的关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    //添加课程
    //this.flag=JSON.stringify(row.selections);//将json对象转换成字符串
    addList() {
      this.$http
        .post("http://10.6.98.76:8080/v1/clazz/save",this.$qs.stringify(this.addForm) )
        .then(res => {
          this.$message.success("成功了");
           this.addVisible=false,
           this.getMain()
        },
        () => {
          console.log("数据加载失败");
        });
    },
    showtaVisible(item) {
      this.editForm={}
      //this.value2=[]
      this.updataVisible = true;
      this.$http.get("http://10.6.98.76:8080/v1/clazz/getById",{params:{id:item}}).then(
        res => {
          this.editForm = res.data;
          // this.value2.push(this.editForm.start)
          // this.value2.push(this.editForm.end)
          //再次渲染到页面
          this.getMain()
        },
        () => {
          console.log("数据加载失败");
        }
      );
    },
    updataList() {
      console.log(this.editForm);
      this.$http.put("http://10.6.98.76:8080/v1/clazz/update", this.$qs.stringify(this.editForm)).then(res => {
        this.$message.success("成功了");
         this.updataVisible=false
         this.getMain()
      },()=>{
        this.$message.error("失败");
        this.updataVisible=false
      });

    },
    removeById(item) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.delete("http://10.6.98.76:8080/v1/clazz/del",{params:{id:item}}).then(
            res => {
               this.$message.success("删除成功");
         this.getMain()
            },
            () => {
              console.log("数据删除失败");
            }
          );
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      //  this.$http.get('http://localhost:8081/json/main.json').then(res=>{
      //   this.editForm=res.data.data
      //   for(let item of this.editForm)
      //   if(item.id===id){
      //     this.editForm=item;
      //   }
      // },() =>{
      //   console.log('数据加载失败')
      // })
    }
  },
};
</script>
<style lang="scss" scoped>
.el-button {
  padding-left: "15px";
}
</style>